<template>
  <n-form v-bind='getBindValue' :inline='true' :model="formModel" label-placement="left">
    <n-grid v-bind='getGrid'>
      <n-gi v-bind='schema.giProps' v-for='schema in schemas' :key='schema.field'>
        <n-form-item :label='schema.label'>
          <template v-if="schema.component ==='NInput' ">
            <n-input v-model:value='formModel[schema.field]' :placeholder="schema.placeholder" />
          </template>
          <template v-else-if="schema.component ==='NRadio' ">
            <n-radio-group v-model:value='formModel[schema.field]'>
              <n-space>
                <n-radio
                  v-for='item in schema.componentProps.options'
                  :key='item.dictValue'
                  :value='item.dictValue'>
                  {{ item.dictLabel }}
                </n-radio>
              </n-space>
            </n-radio-group>
            
          </template>
          <template v-else-if="schema.component ==='NCheckbox' ">
            <n-checkbox-group v-model:value="formModel[schema.field]">
              <n-space>
                <n-checkbox
                  v-for='item in schema.componentProps.options'
                  :key='item.dictValue'
                  :value='item.dictValue'
                >
                  {{ item.dictLabel }}
                </n-checkbox>
              </n-space>
            </n-checkbox-group>
          </template>
          <component
            v-else
            v-bind='schema.componentProps'
            :is='schema.component'
            class='width-full'
            v-model:value="formModel[schema.field]"
          />
        </n-form-item>
      </n-gi>

      <n-gi :suffix='true'>
        <n-space justify="end">
          <n-button
            v-if="getProps.showSubmitButton"
            type='info'
            @click="handleSubmit"
            :size='getProps.size'
            :loading='loading'
          >{{ getProps.submitButtonText }}</n-button>
          <n-button
            v-if="getProps.showResetButton"
            type='default'
            @click='handleReset'
            :size='getProps.size'
          >{{ getProps.resetButtonText }}</n-button>
        </n-space>
      </n-gi>
    </n-grid>
  </n-form>
</template>

<script lang="ts" setup>
  import { computed, ref, unref, reactive, onMounted } from 'vue'
  import { basicProps } from './props'
  import { useFormEvent } from './hooks/useFormEvent'
  import { useFormValue } from './hooks/useFormValue'

  const props = defineProps({...basicProps})
  const defaultFormModel = ref({})
  const formModel = reactive({})
  const loading = ref(false)
  const emit = defineEmits([ 'handleSearch' ])

  const getProps = computed(() => {
    return { ...props }
  })

  const getBindValue = computed(() => {
    return {
      ...unref(getProps)
    }
  })

  // const { gridProps } = getProps.value
  const getGrid = computed(() => {
    const { gridProps } = unref(getProps)
    return {
      ...gridProps
    }
  })
  const { schemas } = getProps.value

  const { initDefault, handleSubmitFormValue } = useFormValue({ defaultFormModel, formModel, schemas })
  const { handleReset } = useFormEvent({ defaultFormModel, formModel })

  /** 点击表单提交按钮 */
  function handleSubmit() {
    console.log('schemas', schemas)
    handleSubmitFormValue()
    emit('handleSearch', formModel)
  }

  onMounted(()=> {
    initDefault()
  })

  defineExpose({
    handleSubmit
  })

</script>

<style>

</style>